<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Widgets in QtJambi</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Widgets, QtJambi, Java">
<meta name="description" content="Widgets in QtJambi">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Widgets in QtJambi</h1>

<p>
In this part of the QtJambi programming tutorial, we will cover QtJambi widgets. 
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 

<p>
Widgets are basic building blocks of a GUI application. Over the years, several widgets became
a standard in all toolkits on all OS platforms. For example a button, a check box or a scroll bar. 
QtJambi has a rich set of widgets which cover most of the programming needs.
More specialized widgets can be created as custom widgets. 
</p>


<h2>QCheckBox</h2>

<p>
The <b class="keyword">QCheckBox</b> is a widget, that has two states. On and Off. 
The On state is visualized by a check mark. It is used to denote some boolean property. 
The QCheckBox widget provides a checkbox with a text label.
</p>

<pre class="code">
package com.zetcode;

import com.trolltech.qt.core.Qt.FocusPolicy;
import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QCheckBox;
import com.trolltech.qt.gui.QWidget;

/**
 * ZetCode QtJambi tutorial
 *
 * This program uses QCheckBox
 * widget to show/hide the title
 * of the window
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */


public class JambiApp extends QWidget {
    
    public JambiApp() {

        setWindowTitle("QCheckBox");
        
        initUI();

        resize(250, 150);
        move(300, 300);
        show();        
    }

    public void initUI() {

        QCheckBox cb = new QCheckBox("Show Title", this);
        cb.setFocusPolicy(FocusPolicy.NoFocus);
        cb.setChecked(true);
        cb.toggled.connect(this, "onChanged(boolean)");

        cb.move(50, 50);

    }

    public void onChanged(boolean state) {
        if (state) {
            setWindowTitle("QCheckBox");
        } else {
            setWindowTitle("");
        }
    }
    
    
    public static void main(String[] args) {
        QApplication.initialize(args);
        new JambiApp();
        QApplication.exec();
    }
}
</pre>

<p>
In our example, we place a check box on the window. The check box shows/hides the title
of the window. 
</p>

<pre class="explanation">
setWindowTitle("QCheckBox");
</pre>

<p>
During the construction of the window, we set a title for the window. 
</p>

<pre class="explanation">
QCheckBox cb = new QCheckBox("Show Title", this);
</pre>

<p>
The <b class="keyword">QCheckBox</b> widget is created. The first
parameter of the constructor is its text label. The second parameter
is the parent widget. 
</p>

<pre class="explanation">
cb.setFocusPolicy(FocusPolicy.NoFocus);
</pre>

<p>
I do not like the visual representation of a focused check box. This line
disables focus. 
</p>

<pre class="explanation">
cb.setChecked(true);
</pre>

<p>
The title is visible at the start of the application. So the check box must
be checked too.
</p>

<pre class="explanation">
cb.toggled.connect(this, "onChanged(boolean)");
</pre>

<p>
The <b class="keyword">toggled()</b> signal is emitted when the 
state of a check box changes. When the signal is emitted, we trigger the
<b class="keyword">onChanged()</b> method. 
</p>

<pre class="explanation">
if (state) {
    setWindowTitle("QCheckBox");
} else {
    setWindowTitle("");
}
</pre>

<p>
Depending on the state of the check box, we show or hide the title of the 
window. 
</p>

<br>
<img src="/img/gui/qtjambi/qcheckbox.png" alt="QCheckBox">
<div class="figure">Figure: QCheckBox</div>


<h2>QLabel</h2>

<p>
The <b class="keyword">QLabel</b> widget is used to display text or image. 
No user interaction is available.
</p>

<pre class="code">
package com.zetcode;

import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QFont;
import com.trolltech.qt.gui.QLabel;
import com.trolltech.qt.gui.QVBoxLayout;
import com.trolltech.qt.gui.QWidget;

/**
 * ZetCode QtJambi tutorial
 *
 * This program uses QLabel to 
 * show lyrics of a song
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class JambiApp extends QWidget {
    
    public JambiApp() {

        setWindowTitle("You know I'm no Good");

        initUI();

        move(300, 300);
        show();
    }
    

    private void initUI() {
       String text =
           "Meet you downstairs in the bar and heard\n" +
           "your rolled up sleeves and your skull t-shirt\n" +
           "You say why did you do it with him today?\n" +
           "and sniff me out like I was Tanqueray\n\n" +
           "cause you're my fella, my guy\n" +
           "hand me your stella and fly\n" +
           "by the time I'm out the door\n" +
           "you tear men down like Roger Moore\n\n" +
           "I cheated myself\n" +
           "like I knew I would\n" +
           "I told ya, I was trouble\n" +
           "you know that I'm no good";

        QLabel label = new QLabel(text, this);
        label.setFont(new QFont("Purisa", 9));

        QVBoxLayout vbox = new QVBoxLayout();
        vbox.addWidget(label);
        setLayout(vbox);
    }
    
    public static void main(String[] args) {
        QApplication.initialize(args);
        new JambiApp();
        QApplication.exec();
    }
}
</pre>

<p>
Our example shows lyrics of a song in the window. 
</p>

<pre class="explanation">
String text =
    "Meet you downstairs in the bar and heard\n" +
...
</pre>

<p>
We define a multi line text. 
</p>

<pre class="explanation">
QLabel label = new QLabel(text, this);
label.setFont(new QFont("Purisa", 9));
</pre>

<p>
We create the label widget and change its font. 
</p>

<pre class="explanation">
QVBoxLayout vbox = new QVBoxLayout();
vbox.addWidget(label);
setLayout(vbox);
</pre>

<p>
Instead of manually coding the position and size of the
label, we put the label into a box layout. 
</p>

<br>
<img src="/img/gui/qtjambi/qlabel.png" alt="QLabel">
<div class="figure">Figure: QLabel</div>


<h2>QLineEdit</h2>

<p>
The <b class="keyword">QLineEdit</b> is a widget that allows to enter and 
edit a single line of plain text. There are undo/redo, cut/paste and 
drag &amp; drop functions available for QLineEdit widget. 
</p>

<pre class="code">
package com.zetcode;

import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QLabel;
import com.trolltech.qt.gui.QLineEdit;
import com.trolltech.qt.gui.QWidget;

/**
 * ZetCode QtJambi tutorial
 *
 * This program shows text
 * which is entered in a QLineEdit
 * widget in a QLabel widget
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class JambiApp extends QWidget {

    QLabel label;
    
    public JambiApp() {

        setWindowTitle("QLineEdit");

        initUI();
        
        resize(250, 200);
        move(300, 300);
        show();
    }

    private void initUI() {

        label = new QLabel(this);

        QLineEdit edit = new QLineEdit(this);
        edit.textChanged.connect(this, "onChanged(String)");

        edit.move(60, 100);
        label.move(60, 40);
    }

    private void onChanged(String text) {
        label.setText(text);
        label.adjustSize();
    }

    
    public static void main(String[] args) {
        QApplication.initialize(args);
        new JambiApp();
        QApplication.exec();
    }
}
</pre>

<p>
In our example we show two widgets. A line edit and a label widget. The text
entered into the line edit is shown in the label widget. 
</p>

<pre class="explanation">
QLineEdit edit = new QLineEdit(this);
</pre>

<p>
The <b class="keyword">QLineEdit</b> widget is created. 
</p>

<pre class="explanation">
edit.textChanged.connect(this, "onChanged(String)");
</pre>

<p>
When we type or delete some text from the line edit, the <b class="keyword">onChanged()</b>
method is triggered. 
</p>

<pre class="explanation">
private void onChanged(String text) {
    label.setText(text);
    label.adjustSize();
}
</pre>

<p>
In the <b class="keyword">onChanged()</b> method, we set the contents of the line edit
to the label widget. The <b class="keyword">adjustSize()</b> method ensures, that all
text is visible. 
</p>

<br>
<img src="/img/gui/qtjambi/qlineedit.png" alt="QLineEdit widget">
<div class="figure">Figure: QLineEdit widget</div>



<h2>Toggle buttons</h2>

<p>
Toggle buttons are push buttons with a checkable flag set. Toggle button is a 
button that has two states. Pressed and not pressed. You toggle between these 
two states by clicking on it. There are situations where this functionality fits well. 
</p>

<pre class="code">
package com.zetcode;

import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QColor;
import com.trolltech.qt.gui.QPushButton;
import com.trolltech.qt.gui.QWidget;
import java.util.Formatter;

/**
 * ZetCode QtJambi tutorial
 *
 * This program uses toggle buttons to
 * change the background color of
 * a widget
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */


public class JambiApp extends QWidget {

    private QWidget square;
    private QColor color;

    private QPushButton redb;
    private QPushButton greenb;
    private QPushButton blueb;

    public JambiApp() {

        setWindowTitle("Toggle Buttons");

        initUI();

        resize(350, 240);
        move(300, 300);
        show();
    }

    private void initUI() {

        color = new QColor();

        redb = new QPushButton("Red", this);
        redb.setCheckable(true);
        greenb = new QPushButton("Green", this);
        greenb.setCheckable(true);
        blueb = new QPushButton("Blue", this);
        blueb.setCheckable(true);

        redb.toggled.connect(this, "onToggled()");
        greenb.toggled.connect(this, "onToggled()");
        blueb.toggled.connect(this, "onToggled()");

        square = new QWidget(this);
        square.setStyleSheet("QWidget { background-color: black }");

        redb.move(30, 30);
        greenb.move(30, 80);
        blueb.move(30, 130);
        square.setGeometry(150, 25, 150, 150);

    }

    public void onToggled() {

        int red = color.red();
        int green = color.green();
        int blue = color.blue();
        
        if (redb.isChecked()) {
            red = 255;
        } else {
            red = 0;
        }
  
        if (greenb.isChecked()) {
            green = 255;
        } else {
            green = 0;
        }

        if (blueb.isChecked()) {
            blue = 255;
        } else {
            blue = 0;
        }
        
        color = new QColor(red, green, blue);

        Formatter fmt = new Formatter();
        fmt.format("QWidget { background-color: %s }", color.name());

        square.setStyleSheet(fmt.toString());
}


    public static void main(String[] args) {
        QApplication.initialize(args);
        new JambiApp();
        QApplication.exec();
    }
}
</pre>

<p>
In the code example, we use three toggle buttons to change the color
of a rectangular widget. 
</p>

<pre class="explanation">
private QWidget square;
private QColor color;

private QPushButton redb;
private QPushButton greenb;
private QPushButton blueb;
</pre>

<p>
We define five objects. The square widget is a <b class="keyword">QWidget</b>, which
shows the color. The <b class="keyword">color</b> variable is used to hold the color value. The three buttons
are toggle buttons, which are used to mix the color value. 
</p>

<pre class="explanation">
redb = new QPushButton("Red", this);
redb.setCheckable(true);
</pre>

<p>
We create a <b class="keyword">QPushButton</b> widget. The
<b class="keyword">setCheckable()</b> method changes the push button
into a toggle button. 
</p>

<pre class="explanation">
redb.toggled.connect(this, "onToggled()");
greenb.toggled.connect(this, "onToggled()");
blueb.toggled.connect(this, "onToggled()");
</pre>

<p>
All three buttons are plugged into one method call, the <b class="keyword">onToggled()</b> method.
</p>

<pre class="explanation">
square = new QWidget(this);
square.setStyleSheet("QWidget { background-color: black }");
</pre>

<p>
We create the square widget. At the beginning, it is black. 
In QtJambi, we use style sheets to customize the appearance of a widget. 
</p>

<p>
Inside the <b class="keyword">onToggled()</b> method, we determine the color value and
update the square widget to a new color. 
</p>

<pre class="explanation">
int red = color.red();
int green = color.green();
int blue = color.blue();
</pre>

<p>
Here we determine the current color of the square widget. 
</p>

<pre class="explanation">
if (redb.isChecked()) {
    red = 255;
} else {
    red = 0;
}
</pre>

<p>
Change the red part of the color, depending on the state of the red toggle button.
</p>

<pre class="explanation">
color = new QColor(red, green, blue);
</pre>

<p>
We create a new color value.
</p>

<pre class="explanation">
Formatter fmt = new Formatter();
fmt.format("QWidget { background-color: %s }", color.name());
</pre>

<p>
These two lines create the text for the style sheet. We use the Java
Formatter object. 
</p>

<pre class="explanation">
square.setStyleSheet(fmt.toString());
</pre>

<p>
The color of the square is updated. 
</p>

<br>
<img src="/img/gui/qtjambi/togglebuttons.png" alt="Toggle buttons">
<div class="figure">Figure: Toggle buttons</div>


<h2>QComboBox</h2>

<p>
The <b class="keyword">QComboBox</b>  is a widget that allows the 
user to choose from a list of options. It is a selection widget 
that displays the current item, and can pop up a list of selectable items.
A combo box may be editable. It presents a list of options to the user in 
a way that takes up the minimum amount of screen space.
</p>

<pre class="code">
package com.zetcode;

import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QComboBox;
import com.trolltech.qt.gui.QLabel;
import com.trolltech.qt.gui.QWidget;

/**
 * ZetCode QtJambi tutorial
 *
 * This program uses the QComboBox widget.
 * The option selected from the combo box is
 * displayed in the label widget.
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class JambiApp extends QWidget {

    QLabel label;
    
    public JambiApp() {

        setWindowTitle("QComboBox");

        initUI();
        
        resize(250, 200);
        move(300, 300);
        show();
    }
    
    private void initUI() {

        label = new QLabel("Ubuntu", this);

        QComboBox combo = new QComboBox(this);

        combo.addItem("Ubuntu");
        combo.addItem("Fedora");
        combo.addItem("Mandriva");
        combo.addItem("Red Hat");
        combo.addItem("Mint");

        combo.currentStringChanged.connect(this, "OnActivated(String)");

        combo.move(50, 30);
        label.move(50, 100);
    }

    private void OnActivated(String text) {
       label.setText(text);
       label.adjustSize();
    }
    
    public static void main(String[] args) {
        QApplication.initialize(args);
        new JambiApp();
        QApplication.exec();
    }
}
</pre>

<p>
In our code example, we have two widgets. A combo box and a label widget. 
The option selected from a combo box is shown in the label. 
</p>

<pre class="explanation">
label = new QLabel("Ubuntu", this);
</pre>

<p>
This is the label, that will show the currently selected option
from the combo box. 
</p>

<pre class="explanation">
QComboBox combo = new QComboBox(this);
</pre>

<p>
We create the instance of the <b class="keyword">QComboBox</b> widget. 
</p>

<pre class="explanation">
combo.addItem("Ubuntu");
combo.addItem("Fedora");
combo.addItem("Mandriva");
combo.addItem("Red Hat");
combo.addItem("Mint");
</pre>

<p>
Combo box is filled with values. 
</p>

<pre class="explanation">
combo.currentStringChanged.connect(this, "OnActivated(String)");
</pre>

<p>
When we select an option from the combo box, the <b class="keyword">OnActivated()</b> method
is triggered. 
</p>

<pre class="explanation">
private void OnActivated(String text) {
    label.setText(text);
    label.adjustSize();
}
</pre>

<p>
In the <b class="keyword">OnActivated()</b> method, we update the label widget to the 
currently selected string from the combo box. 
</p>

<br>
<img src="/img/gui/qtjambi/qcombobox.png" alt="QComboBox widget">
<div class="figure">Figure: QComboBox widget</div>

<hr class="btm">

<p>
In this part of the QtJambi tutorial, we have presented several QtJambi widgets. 
</p>

<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified April 28, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
